<template>
	<view class="location-main">
		<label class="location-tips">小程序将会获取您的位置信息用于岗位列表展示</label>
		<view class="location-body">
			<view class="location-item" v-for="(item,index) in array" :key="index" @click="onItemClick(index)">
				<label class="location-item-label">{{item.label}}</label>
				<label class="location-item-active" v-if="acitveIndex==index"></label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acitveIndex:1,
				array:[{type:1,label:"不允许"},{type:2,label:"仅在使用小程序期间"},{type:3,label:"仅在使用小程序期间和离开小程序后"}]
			}
		},
		methods: {
			onItemClick(index){
				this.acitveIndex = index;
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
.location-main{
	display: flex;
	flex-flow: column;
	background-color: #F4F4F4;
	padding: 0 32rpx;
	height: 100%;
}
.location-tips{
	font-size: 24rpx;
	color: #ACACAC;
	margin: 20rpx 0;
}
.location-body{
	background-color: #FFFFFF;
	border-radius: 16rpx;
}
.location-item{
	margin: 0 32rpx;
	height: 94rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #DDDDDD;
}
.location-item:last-child{
	border-bottom: 0;
}
.location-item-label{
	font-size: 30rpx;
	color: #181818;
	flex: 1;
}
.location-item-active {
		width: 33rpx;
		height: 23rpx;
		background: url(../../static/images/icon_item_active@3x.png) center no-repeat;
		background-size: 33rpx 23rpx;
	}
</style>
